<template>
    <LeftRightLayoutContainer type="left">
        <template #default>
            <div class="panel-big-title">企业管服态势</div>
            <BasePanel
                width="100%"
                height="400px"
                :show-header="false"
                :class="{ 'base-panel-checked': globalStore.currentPopName === 'PollutantPermitUnitPop' }"
                @click="openDialog('PollutantPermitUnitPop')"
            >
                <EnterpriseSituation />
            </BasePanel>
            <div class="panel-big-title mt-10px">企业分级监管</div>
            <BasePanel
                width="100%"
                height="180px"
                :show-header="false"
                class="mt-10px"
                :class="{ 'base-panel-checked': globalStore.currentPopName === 'EnterpriseCtrlInfoPop' }"
                @click="openDialog('EnterpriseCtrlInfoPop')"
            >
                <EnterpriseSupervision />
            </BasePanel>
               <div class="panel-big-title mt-10px">企业在线帮扶</div>
            <BasePanel
                width="100%"
                height="180px"
                :show-header="false"
                class="mt-10px"
            >
                <EnterpriseAssistance />
            </BasePanel>
        </template>
    </LeftRightLayoutContainer>
</template>

<script setup lang="ts">
import LeftRightLayoutContainer from '@/components/LeftRightLayoutContainer/index.vue'
import BasePanel from '@/components/BasePanel/index.vue'
import { useGlobalStore } from '@/store/global'
import EnterpriseSituation from './Left/EnterpriseSituation.vue'
import EnterpriseSupervision from './Left/EnterpriseSupervision.vue'
import EnterpriseAssistance from './Left/EnterpriseAssistance.vue'
const globalStore = useGlobalStore()

function openDialog(popName: string) {
    globalStore.togglePopInfo({
        popName,
        popData: null,
    })
}
</script>

<style lang="scss" scoped>
</style>
